<template>
    <div class="container">
        <van-nav-bar
            left-arrow
            @click-left="back"
            class="theme-color"
        />
		<div class="healthLogo">
			<van-image
			    width="100"
			    height="100"
			    :src="require('../../assets/logo.png')"
			/>
		</div>
        <van-form>
            <van-cell-group inset>
                <van-field
                    v-model="phone"
                    name="phone"
                    placeholder="手机号"
                    :rules="[{ validator: validatorPhone, required: true, message: '请填写正确手机号' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    placeholder="密码"
                    :rules="[{ validator: validatorPass, required: true, message: '长度至少为8，至少含有一个字母和一个数字' }]"
                />
            </van-cell-group>
			<van-row justify="space-between">
				<van-col span="8" @click="toRegist">前往注册</van-col>
			    <van-col span="8">忘记密码？</van-col>
			</van-row>
            <div style="margin: 60px 60px 0px">
                <van-button round block type="success" color="#1365b7" @click="login">登录</van-button>
            </div>
            
        </van-form>
    </div>
</template>

<script>
	import { loginapi } from '../../request/api/loginApi.js'
	import { Toast } from "vant"
	
export default {
    name: "login",
    data() {
        return {
            phone: "",
            password: ""
        };
    },
    methods: {
		// 手机号校验
		validatorPhone(val) {
			 return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(val)
		},
		// 密码校验
		validatorPass(val) {
			return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(val)
		},
		// 点击登陆
		login() {
			const userObj = {
				phone: this.phone,
				password: this.password
			}
			loginapi(userObj).then(res => {
				if (res.data) {
				    if (res.data.code == 0) {
                        if (res.data.userObj?.flag == 0) {
                            Toast({
                                message: "账号异常，无法登录",
                                icon: 'fail',
                            })
                        } else {
                            sessionStorage.setItem('token', res.data.token)
                            // 设置登录状态为true
                            sessionStorage.setItem("isLogin", JSON.stringify(true))
                            Toast({
                                message: res.msg,
                                icon: 'success',
                            })
                            // 存储用户信息到vuex
                            this.$store.dispatch('saveUserInfo', res.data.userObj)
                            // 存储部分信息到sess
                            const { id, phone, userImg, userName, sex } = res.data.userObj
                            const user = {
                                id,
                                phone,
                                img: userImg,
                                name: userName,
                                sex
                            }
                            sessionStorage.setItem('user', JSON.stringify(user))
                            // 连接socket
                            // this.$socket.connect();
                            // this.$socket.emit('login', { name: res.data.userObj.userName }, (result)=>{
                            //     console.log(result)
                            // })
                            this.$router.push({ name: 'home' })
                        }     
				    }
				} else {
					Toast({
						message: res.msg,
						icon: 'fail',
					})
				}
			}).catch()
		},
		// 跳转注册
        toRegist() {
            this.$router.push({ name: 'regist' })
        },
		// 返回
        back() {
            this.$router.push({ name: 'home' })
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    // background-image: url('../../assets/bg.png');
    background-size: 100% 100%;
    position: relative;
    .van-nav-bar {
        background: transparent;
    }
	.healthLogo {
		margin-top: 10%;
		display: flex;
		justify-content: center;
	}
    .van-form {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        .van-cell-group {
            background: transparent;
			padding: 0 16px;
        }
        ::v-deep .van-field {
            margin-top: 20px;
            border-radius: 100px;
			border: #000;
        }
        .van-row {
			padding: 20px 16px 0;
			font-size: 12px;
            text-align: center;
            color: #555;
        }
    }
}
.theme-color {
    color: #1365b7;
}
</style>